<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>双计时器</title>
    <link rel="stylesheet" href="./styles.css" />
    <style>
      .timer-container {
        margin: 20px;
        padding: 15px;
        border: 1px solid #ccc;
      }
      .timer {
        font-size: 2em;
        margin: 10px 0;
      }
      .red {
        color: greenyellow;
      }
      input {
        width: 60px;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <!-- 工作计时器 -->
    <div class="timer-container">
      <h2>工作计时器</h2>
      <div class="timer" id="work-timer">-</div>
      <div style="display: none" id="work-timer-value">0</div>
      目标：<input
        type="number"
        id="work-minutes"
        placeholder="分钟"
        readonly
      />
      min
      <button onclick="startTimer('work')">开始工作</button>
      <button onclick="plusTimer('work',60)">+1 min</button>
      <button onclick="plusTimer('work',300)">+5 min</button>
    </div>

    <!-- 业余计时器 -->
    <div class="timer-container">
      <h2>业余工作计时器</h2>
      <div class="timer" id="hobby-timer">-</div>
      <div style="display: none" id="hobby-timer-value">0</div>
      目标：<input
        type="number"
        id="hobby-minutes"
        placeholder="分钟"
        readonly
      />
      min
      <button onclick="startTimer('hobby')">开始业余</button>
      <button onclick="plusTimer('hobby',60)">+1 min</button>
      <button onclick="plusTimer('hobby',300)">+5 min</button>
    </div>

    <button onclick="stopAllTimers()" style="margin: 10px 20px">全部停止</button>
    <div class="timer-container">
      <div>今日累计工作：<span id="todayWork">-</span></div>
      <div>今日累计业务：<span id="todayHobby">-</span></div>
    </div>
    <button onclick="refresh()" style="margin: 10px 20px">刷新累计</button>
    <div style="margin-left: 20px">自动保存时间： 1min</div>
    <script src="./renderer.js"></script>
  </body>
</html>
